<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
    <script src="https://how2j.cn/study/vue.min.js"></script>
    <script src="https://how2j.cn/study/axios.min.js"></script>
</head>
        <body>
                <table class="table table-bordered" id="div1">
                    <thead>
                    <th>名字</th>
                    <th>HP</th>
                    </thead>
                    <tbody>
                    <tr v-for="hero in heros">
                        <td>{{hero.name}}</td>
                        <td>{{hero.hp}}</td>
                    </tr>
                    </tbody>
                </table>
        </body>


        <script>

            var url = "http://how2j.cn/study/jsons.txt";
            new Vue({
                el:'#div1',
                data:{
                    heros:[]
                },
                mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
                    var self = this
                    axios.get(url).then(function(response) {
                        self.heros= response.data; //此时还是字符串
                    })
                },
                methods:{

                }
            })

        </script>
</html>
